<template>

	<view class="normal-login-container">

		<image class="deco1" src="/static/img/deco1.png" mode=""></image>
		<image class="deco2" src="/static/img/deco2.png" mode=""></image>
		<view>
			<!-- <view class="title">
				圣牧有机店主订购
			</view> -->
			<view class="logo1">

				<image src="/static/img/logo.png" mode=""></image>
			</view>
			<view class="subTit">
				圣牧有机店主订购平台
			</view>
			<view class="login-form-content">
				<form @submit.prevent="submit">
					<view class="input-item ">
						<input v-model="account" class="input" type="number" required placeholder="请输入手机号码"
							maxlength="11" />
					</view>

					<view class="input-item ">
						<view class="phoneInput">
							<input class="input" type="number" placeholder="请输入验证码" v-model="captcha" required />
						</view>
						<view class="phoneCode" @click="sendCode">
							{{ clockText }}
						</view>
					</view>


					<view class="action-btn">
						<button @click="loginMobile" class="login-btn">登录</button>
						
					</view>
					<view v-if="flag"  style="font-size: 12px; color: #999; padding-top: 20rpx;">
						仅供企业内部使用
					</view>
					
					<view v-if="!flag"  @click="goregister" style="font-size: 12px; color: #666; padding-top: 20rpx; text-decoration: underline;">
						无账号？去注册
					</view>
				</form>
			</view>
			<div style="padding:15rpx 0 0; text-align: center;">
				<!-- <view class="register">
					<navigator class="register-link" url="reg" open-type="navigate">人脸活体</navigator>
				</view> -->
				<!-- <view class="register">
					<navigator class="register-link" url="forget" open-type="navigate">忘记密码</navigator>
				</view> -->
			</div>

		</view>

		<view class="">
			<view class="xieyi text-center">
				<view class="hint">
					<label @tap.stop="onChange" class="radio">
						<radio activeBackgroundColor="#005850" style="transform:scale(0.7)" :checked="isChecked" />
						我已经阅读并遵守
					</label>
					<text class="link" @click="handlePrivacy('/pages/user/Login/yhxy')">《用户协议》</text>与
					<text class="link" @click="handlePrivacy('/pages/user/Login/ysxc')">《隐私政策》</text>
				</view>

				<!-- <checkbox color="#005850"  :checked="checked" >我已阅读并同意</checkbox><text
					@click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyhxy.html','用户协议')"
					class="text-blue">《用户协议》</text>
				<text @click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyszc.html','隐私政策')"
					class="text-blue">《隐私政策》</text> -->
			</view>

		</view>


		<!-- <u-modal title="提示" width="80%" class="modal" v-model="show" :mask-close-able="true" confirm-text="同意并继续"
			:show-cancel-button="true" @confirm="xyConfirm">
			
			<view class="modal-xy">
				我已仔细阅读并同意
				<text @click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyhxy.html','用户协议')"
					class="text-blue">
					《用户协议》
				</text>
				及
				<text @click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyszc.html','隐私政策')"
					class="text-blue">
					《隐私政策》
				</text>
				的全部条款与内容。
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	import sendVerifyCode from '@/mixins/SendVerifyCode'
	import {
		getOpenid,
		login,
		loginMobile,
		registerVerify,
		register,
		getConfig
	
	} from '@/api/user'
	import attrs, {
		required,
		alpha_num,
		chs_phone
	} from '@/utils/validate'
	import {
		validatorDefaultCatch
	} from '@/utils/dialog'
	import dayjs from 'dayjs'
	import cookie from '@/utils/store/cookie'

	import {
		handleGetUserInfo
	} from '@/utils'

	const BACK_URL = 'login_back_url'

	export default {
		name: 'Login',
		mixins: [sendVerifyCode],
		data: function() {
			return {
				flag:false,
				navList: ['手机号登录'],
				// navList: ["手机号登录",],
				current: 0,
				account: '',
				password: '',
				captcha: '',
				inviteCode: '',
				formItem: 1,
				type: 'login',
				timer: null,
				clock: 60,
				clockText: '获取验证码',
				isChecked: false,
				// code: ""
			}
		},
		onShow() {
			if (this.$store.getters.token) {
				uni.switchTab({
					url: "/pages/shop/GoodsClass/index"
				})
			}
			this.getConfigFn()
		},
		onLoad() {
			
			if(!uni.getStorageSync('storage_openid')){
				uni.login({
					success: async loginRes => {
						// this.code = loginRes.code
						getOpenid({
								code: loginRes.code,
							})
							.then(res => {
								
								uni.setStorageSync('storage_openid', res?.data?.openid);
								
								
							})
							
					}
				})
			}

			
		},
		methods: {
			
			getConfigFn(){
				getConfig()
					.then(res => {
						console.log(res?.data,77777)
						this.flag = res?.data=='审核中'?true:false
					})
					.catch(err => {
						
					})
			},
			handlePrivacy(url){
				uni.navigateTo({
					url
				})
			},
			goNewsDetail(id, name) {
				this.$yrouter.push({
					path: "/pages/shop/news/NewsDetail/index",
					query: {
						id: id,
						name: name
					}
				});
			},
			onChange() {
				console.log('isChecked;', this.isChecked)
				this.isChecked = !this.isChecked
			},
			async loginMobile() {
				if (!this.isChecked) {
					uni.showToast({
						title: '请勾选下面协议',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				var that = this
				const {
					account,
					captcha
				} = that
				try {
					await that
						.$validator({
							account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
							captcha: [required(required.message('验证码')), alpha_num(alpha_num.message('验证码'))],
						})
						.validate({
							account,
							captcha,
						})
				} catch (e) {
					return validatorDefaultCatch(e)
				}
				loginMobile({
						openid:uni.getStorageSync('storage_openid'),
						account: that.account,
						captcha: that.captcha,
						spread: cookie.get('spread'),
					})
					.then(res => {
						this.$store.commit('login', res.data.token, dayjs(res.data.expires_time))
						handleGetUserInfo()
					})
					.catch(err => {
						console.log(err, '^^^^^^^^^')
						uni.showToast({
							title: err?.msg || err?.response?.data?.msg || err?.response?.data?.message,
							icon: 'none',
							duration: 4000,
						})

						if (err?.msg == '该用户未注册! 请先完成注册') {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/Register/index"
								})
							}, 2000)
						}


					})
					.then(res1 => {
						that.$store.commit("login", res1.data.token, dayjs(res1.data.expires_time));
						handleGetUserInfo();
					})
					.catch(err1 => {
						console.log(err, '@@@@@@@@@')
						uni.showToast({
							title: err1.msg || err1.response.data.msg || err1.response.data.message,
							icon: "none",
							duration: 2000
						});
					});
			},
			async register() {
				var that = this
				const {
					account,
					captcha,
					password
				} = that
				try {
					await that
						.$validator({
							account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
							captcha: [required(required.message('验证码')), alpha_num(alpha_num.message('验证码'))],
							password: [required(required.message('密码')), attrs.range([6, 16], attrs.range.message(
								'密码')), alpha_num(alpha_num.message('密码'))],
						})
						.validate({
							account,
							captcha,
							password,
						})
				} catch (e) {
					return validatorDefaultCatch(e)
				}
				register({
						account: that.account,
						captcha: that.captcha,
						password: that.password,
						inviteCode: that.inviteCode,
						spread: cookie.get('spread'),
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000,
						})
						that.formItem = 1
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000,
						})
					})
			},
			// 获取验证码
			async code() {
				const {
					account
				} = this
				try {
					await this.$validator({
						account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
					}).validate({
						account,
					})
				} catch (e) {
					return validatorDefaultCatch(e)
				}
				if (this.formItem == 2) this.type = 'register'
				this.showCode()
			},
			// 手机号登录获取验证码
			async sendCode() {
				const {
					account
				} = this
				try {
					await this.$validator({
						account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
					}).validate({
						account,
					})
				} catch (e) {
					return validatorDefaultCatch(e)
				}
				// 倒计时
				if (this.clock !== 60) {
					return
				}
				this.clock--
				this.clockText = `${this.clock} 秒`
				this.timer = setInterval(() => {
					if (parseInt(this.clock) === 1) {
						clearTimeout(this.timer)
						this.clock = 60
						this.clockText = '获取验证码'
						return
					}
					this.clock--
					if (this.clock < 10) this.clock = `0${this.clock}`
					this.clockText = `${this.clock} 秒`
				}, 1000)
				this.showCode()
			},
			// 验证码请求
			showCode() {
				return registerVerify({
						phone: this.account,
						type: this.type,
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000,
						})
						this.sendCode()
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000,
						})
					})
			},
			goregister(){
				uni.navigateTo({
					url: "/pages/user/Register/index"
				})
			},
			navTap(index) {
				this.current = index
			},
			async submit() {
				const {
					account,
					password
				} = this
				try {
					await this.$validator({
						account: [required(required.message('账号')), attrs.range([5, 16], attrs.range.message(
							'账号')), alpha_num(alpha_num.message('账号'))],
						password: [required(required.message('密码')), attrs.range([6, 16], attrs.range.message(
							'密码')), alpha_num(alpha_num.message('密码'))],
					}).validate({
						account,
						password,
					})
				} catch (e) {
					return validatorDefaultCatch(e)
				}

				login({
						username: account,
						password,
						spread: cookie.get('spread'),
					})
					.then(res => {
						this.$store.commit('login', res.data.token, dayjs(res.data.expires_time))
						handleGetUserInfo()
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000,
						})
					})
			},
		},
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #E7F1FF 0%, #FFFFFF 100%);
	}
</style>

<style lang="scss" scoped>
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		padding-top: 80rpx;
	}

	.logo1 {
		image {
			width: 180rpx;
			height: 180rpx;
			display: block;
			margin: 160rpx auto 80rpx;
		}

	}

	.subTit {
		ont-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 45rpx;
		color: #000000;
		text-align: center;
	}

	.modal {
		width: 80%;

		.title {
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.modal-xy {
			text-align: justify;
			padding: 40rpx;
			// height: 100rpx;
			// line-height: 100rpx;
			// text-align: center;
			font-family: PingFang SC, PingFang SC;

			font-size: 28rpx;
			color: #000000;
		}
	}

	.normal-login-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;

		// min-height: 90vh;
		.deco1 {
			position: absolute;
			width: 195rpx;
			height: 357rpx;
			left: 0rpx;
			top: 30rpx;
		}

		.deco2 {
			position: absolute;
			width: 104rpx;
			height: 297rpx;
			right: 0rpx;
			top: 239rpx;
		}

		.image-container {
			position: relative;
			width: 100%;
			height: 440rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;

			.login-image {
				width: 100%;
				height: 100%;
			}


			.login-text-s {
				position: absolute;
				top: 270rpx;
				left: 70rpx;
			}
		}

		.login-discribe {
			margin-top: 73rpx;
			padding: 0 70rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.login-form-content {
			margin-top: 142rpx;
			text-align: center;
			width: 100%;
			padding: 0 65rpx;

			.input-item {
				margin: 0 auto 40rpx;
				width: 610rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				display: flex;
				align-items: center;



				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

				.phoneInput {
					// width: 70%;
					flex: 1;
					// background: pink;
				}

				.phoneCode {
					// width: 30%;
					margin-right: 20rpx;
					text-align: center;
					color: #ffffff;
					// background-color: #f35749;
					padding: 12rpx;
					color: #005850;
					font-size: 28rpx;
					border-radius: 30rpx;
					text-decoration: underline;
				}

			}

			.login-btn {
				width: 610rpx;
				height: 96rpx;
				background: #005850;
				box-shadow: 0rpx 12rpx 9rpx 4rpx rgba(0, 19, 126, 0.11);
				border-radius: 50rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}


		.text-blue {
			font-size: 28rpx;
			color: #005850;
			margin-left: 8rpx;
		}

		.login-icon {
			width: 46rpx;
			margin-left: 40rpx;
		}
	}

	.hint {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		font-size: 25rpx;
		color: #000;

		.link {
			color: #005850;
		}
	}

	.register .whiteBg .title .item {
		border-bottom: 2px solid;
	}

	.register {
		display: inline-block;
		color: #005850;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		float: right;
		padding: 20rpx 70rpx;
	}

	.register-link {
		font-size: 28rpx;
		float: right;
		padding: 0 16rpx;
	}

	.xieyi {
		margin-top:180rpx;
		text-align: center;
		width: 100%;
		font-family: PingFang SC;
		font-weight: 400;

		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
		// line-height: 58rpx;
	}
</style>